<template>
  <div class="published-wrap">
    <div class="thanks">
      <p class="title">发布成功，IT行业因您更美好</p>
      <div class="printer-wrap">
        <div class="printer">
          <div class="btn"></div>
          <div class="result"></div>
        </div>
        <div class="article">
          <hr><hr><hr><hr><hr><hr><hr>
        </div>
        <div class="printer copy">
          <div class="btn"></div>
          <div class="result"></div>
        </div>
      </div>
    </div>
    <p class="article-title">
      <router-link :to="'/article/'+this.articleId" v-text="this.articleTitle"></router-link>
    </p>
    <div class="copyError" v-if="this.copyErrorBool">
      复制失败，请手动复制以下链接
      <span class="close" @click="closeCopyInfo">关闭</span>
      <p v-text="this.copyLinkContent"></p>
    </div>
    <div class="share-list">
      分享到：
      <button class="share-item qq" @click="shareToQQ"><i class="iconfont qq"></i>QQ</button>
      <button class="share-item zone" @click="shareToZone"><i class="iconfont zone"></i>空间</button>
      <button class="share-item wx" @click="shareToWX">
        <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
          <div class="qrcode-wrap" v-show="this.linshi">
            <vue-qrcode :Qwidth="200" :Qheight="200" :Qcontent="this.copyLinkContent"></vue-qrcode>
            <span>微信扫描</span>
          </div>
        </transition>
        <i class="iconfont wx"></i>微信
      </button>
      <button class="share-item" @click="copyLinkHandle"><i class="iconfont lj"></i>复制链接</button>
    </div>
    <input type="text" class="linkInput" ref="copyLinkInput" :value="this.copyLinkContent">
  </div>
</template>

<script>
import vueQrcode from '@/components/qrcode/qrcode'
export default {
  name: '',
  data () {
    return {
      copyErrorBool: false,
      copyLinkContent: '',
      articleId: '',
      articleTitle: '',
      articleContent: '',
      linshi: false
    }
  },
  components: {
    vueQrcode
  },
  methods: {
    copyLinkHandle () {
      this.$refs.copyLinkInput.select()
      let bool = document.execCommand('copy')
      if (bool) {
        this.common.showRegError('复制成功', this, true)
      } else {
        this.copyErrorBool = true
      }
    },
    closeCopyInfo () {
      this.copyErrorBool = false
    },
    shareToQQ () {
      window.open('http://connect.qq.com/widget/shareqq/index.html?url=http://shiliqingshan.com/web/#/artice/' + this.articleId + '&sharesource=qzone&title=' + this.articleTitle + '&pics=http://shiliqingshan.com/web/static/img/logo100.jpg&summary=' + this.articleContent + '&desc=我找到了一篇特别好的文章，推荐你也看看')
    },
    shareToZone () {
      window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://shiliqingshan.com/web/#/artice/' + this.articleId + '&sharesource=qzone&title=' + this.articleTitle + '&pics=http://shiliqingshan.com/web/static/img/logo100.jpg&summary=' + this.articleContent + '&desc=我找到了一篇特别好的文章，推荐你也看看')
    },
    shareToWX () {
      this.linshi = !this.linshi
    }
  },
  mounted () {
    this.$ajax('/web/php/published.php').then((res) => {
      res = res.data
      if (res.returnCode === 10063) {
        this.articleId = res.dataInfo
        this.$ajax({
          method: 'post',
          url: '/web/php/article.php',
          data: this.$qs.stringify({
            type: 'get_article',
            articleId: this.articleId
          })
        }).then((res) => {
          res = res.data
          switch (res.returnCode) {
            case 10080:
              this.articleTitle = res.dataInfo.title
              this.articleContent = res.dataInfo.content
              this.copyLinkContent = 'http://shiliqingshan.com/web/#/artice/' + this.articleId
              break
            case 10081:
              this.$router.push('/')
              this.common.showRegError(res.dataInfo, this)
              break
            default:
              this.$router.push('/')
              this.common.showRegError('参数错误，同学你不要调皮哦', this)
              break
          }
        })
      } else {
        this.$router.push('/')
      }
    })
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.published-wrap
  max-width 19.2rem
  margin auto
  .linkInput
    position absolute
    top 0
  .thanks
    display flex
    flex-direction column
    align-items center
    .title
      font-size .48rem
      margin .8rem 0 .6rem
      font-weight bold
      color $theme-4-color
    .printer-wrap
      padding 0 .4rem
      height 4.5rem
      overflow hidden
      position relative
      .printer
        width 2.4rem
        height 1rem
        background #eee
        border-radius .3rem
        overflow hidden
        position relative
        &.copy
          margin-top -1rem
          z-index 3
          height 0.68rem
        .btn
          background #f35d5d
          width 0.2rem
          height 0.2rem
          border-radius 50%
          margin .2rem
        .result
          width 80%
          height 0.16rem
          background #ccc
          margin .2rem auto 0
          border-radius .1rem
      .article
        height 2rem
        width 1.6rem
        border .02rem solid #ddd
        margin-left -.8rem
        left 50%
        padding .1rem .14rem
        animation mymove 4s linear infinite
        position absolute
        box-sizing border-box
        background #fff
        z-index 2
        hr
          color #ddd
          margin-top .2rem
        @keyframes mymove
          0%
            top -1.32rem
          50%
            opacity 1
          100%
            opacity .2
            top 2.5rem
  .article-title
    text-align center
    padding .4rem
    background $theme-background
    ellipsis()
    &>a
      font-size .46rem
      text-decoration underline
  .copyError
    background $theme-background
    text-align center
    padding 0 .4rem
    color #ff0000
    .close
      color $theme-4-color
      cursor pointer
    p
      color $theme-color
  .share-list
    display flex
    align-items center
    flex-wrap wrap
    justify-content center
    padding .2rem
    background $theme-background
    .share-item
      border .02rem solid $theme-5-color
      padding .06rem .4rem
      border-radius .4rem
      margin .1rem .2rem
      display flex
      align-items center
      cursor pointer
      background $theme-background
      &.wx
        &:focus
          .qrcode-wrap
            // display block
        .qrcode-wrap
          position fixed
          top 50%
          margin-top -3rem
          left 50%
          margin-left -2.2rem
          // display none
          padding .2rem
          background #fff
          border-radius .1rem
          box-shadow 0 0 .1rem 0 rgba(0,0,0,.2)
          z-index 3
          font-size .32rem
          line-height 2
      .iconfont
        margin-right .1rem
        font-size .4rem
        &.qq:after
          color #00d0ff
          content '\e612'
        &.zone:after
          color #ffb62b
          content '\e697'
        &.wx:after
          color #05d605
          content '\e61b'
        &.lj:after
          color #2246fb
          content '\e7ff'

@media only screen and (max-width: 700px)
  .published-wrap .share-list .share-item
    width .64rem
    height .64rem
    padding 0 0 0 .1rem
    white-space nowrap
    overflow hidden
    &.qq,&.zone
      display none

</style>
